<template>
    <div v-show="total">
        <!-- <input type="checkbox" :checked="isAllChecked" @change="checkAll"/> -->
        <!-- 方法2，不用读取dom的值，v-model可以绑定computed -->
        <input type="checkbox" v-model="isAllChecked"/>
        已完成 {{doneCount}} / {{todos.length}} 
        <button @click="clearAllTodo">删除选中</button>
    </div>
</template>

<script>
    export default {
        name : "MyFooter",
        props:["todos"],
        computed:{
            total(){
                return this.todos.length
            },
            doneCount(){
                return this.todos.reduce((count,todo) => count+(todo.done?1:0) ,0 )
            },
            // 计算属性允许套娃
            isAllChecked: {
                get(){
                    return this.total === this.doneCount && this.total > 0 
                },
                set(value){
                    console.log('value', value,this)
                    this.$emit("checkAllTodo",value)
                }
            },
        },
        methods:{
            clearAllTodo(){
                this.$emit("clearAllTodo")
            },
        }
    }
</script>

<style scoped>
    
</style>